import { useContext } from 'react'
import { LevelContext } from './LevelContext.js'
import { Typography } from 'antd'
const { Title } = Typography

// < Title > h1.Ant Design</Title>
// <Title level={2}>h2. Ant Design</Title>
// <Title level={3}>h3. Ant Design</Title>
// <Title level={4}>h4. Ant Design</Title>
// <Title level={5}>h5. Ant Design</Title>

export default function Heading({ children }: any) {
    const level = useContext(LevelContext)
    switch (level) {
        case 1:
            return <Title>{children}</Title>
        case 2:
            return <Title level={2}>{children}</Title>
        case 3:
            return <Title level={3}>{children}</Title>
        case 4:
            return <Title level={4}>{children}</Title>
        case 5:
            return <Title level={5}>{children}</Title>
        case 6:
            return <Title level={undefined}>{children}</Title>
        default:
            throw Error('未知的 level：' + level)
    }
}
